<template>
  <div>
    <el-table :data="userShowArray">

      <el-table-column prop="name" label="姓名" align="center" width="200">
        <template slot-scope="scope">
          <span v-show="!scope.row.isEdit">{{ scope.row.name }}</span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="telephone" label="电话" align="center" width="200">
        <template slot-scope="scope">
          <span v-show="!scope.row.isEdit">{{ scope.row.telephone }}</span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.telephone"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" align="center" width="200">
        <template slot-scope="scope">
          <span v-show="!scope.row.isEdit">{{ scope.row.email }}</span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.email"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center" width="200">
        <template slot-scope="scope">
          <span v-show="!scope.row.isEdit">{{ scope.row.address }}</span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.address"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleSave(scope.$index, scope.row)">保存</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-dialog width="38%" title="添加信息" :visible.sync="innerVisible" append-to-body>
      <el-form :model="form">
        <el-form-item label="姓名:" :label-width="formLabelWidth">
          <el-input v-model="form.name" style="width:300px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话:" :label-width="formLabelWidth">
          <el-input v-model="form.telephone" style="width:300px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" :label-width="formLabelWidth">
          <el-input v-model="form.email" style="width:300px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址:" :label-width="formLabelWidth">
          <el-input v-model="form.address" style="width:300px" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm()">确认添加</el-button>
      </div>
    </el-dialog>

    <div slot="footer" class="dialog-footer" style="flex-direction: row">

      <span class="block" v-show='userShow'>
        <el-pagination class="pagnation" layout="prev, pager, next" :total="userLength" @current-change="changeUserPage"
          :current-page.sync="currentUserPage" :page-size='5'>
        </el-pagination>
      </span>

      <span>
        <el-input placeholder="请输入关键字搜索" v-model="search" class="search" autocomplete="off"></el-input>
        <el-button type="primary" @click="userSearch()">搜索</el-button>
        <el-button @click="userCancel()">关闭搜索</el-button>
      </span>

      <span>
        <el-button type="primary" style="margin-left: 120px;" @click="addUser()">添加信息</el-button>
      </span>


    </div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.withCredentials = true;
export default {
  name: "UserManager",
  data() {
    return {
      form: {
        name: '',
        telephone: '',
        email: '',
        address: ''
      },
      innerVisible: false,
      userBase: [],
      formLabelWidth: '90px',
      currentUserPage: 1,
      userLength: 0,
      userShow: false,
      userShowArray: [],
      search: ''
    }
  },
  methods: {
    changeUserPage(e) {
      this.userPagnation(e)
    },
    userPagnation(e) {
      this.userShowArray = []
      if (this.userBase.length >= 5 * e) {
        for (let i = (e - 1) * 5; i < e * 5; i++) {
          this.userShowArray.push(this.userBase[i])
        }
      } else {
        for (let i = (e - 1) * 5; i < this.userBase.length; i++) {
          this.userShowArray.push(this.userBase[i])
        }
      }
    },
    async showUser() {
      const users = await this.$axios.get("/user");
      this.userBase = users
      this.userPagnation(1)
      this.currentUserPage = 1
      if (this.userBase.length != 0) {
        this.userShow = true
      } else {
        this.userShow = false
      }
      this.userLength = this.userBase.length
    },
    async addUser() {
      this.innerVisible = true;
    },
    async confirm() {
      this.innerVisible = false;
      const result = await this.$axios.post("/addUser", {
        name: `${this.form.name}`,
        telephone: `${this.form.telephone}`,
        email: `${this.form.email}`,
        address: `${this.form.address}`
      });
      if (result.code == 200) {
        this.$message.success('添加成功')
        if (this.userShowArray.length < 5) {
          this.userShowArray.push(this.form)
        }
        this.userBase.push(this.form)
        this.userLength = this.userBase.length
        this.form = {
          name: '',
          telephone: '',
          email: '',
          address: ''
        }
      } else {
        this.$message.error('添加失败')
      }
    },
    handleEdit(index) {
      this.$set(this.userShowArray[index], 'isEdit', true)
    },
    async userSearch() {
      if (this.search) {
        const res = await this.$axios.post('/searchUser', { key: this.search })
        this.userBase = res
        this.userPagnation(1)
        this.currentUserPage = 1
        if (this.userBase.length != 0) {
          this.userShow = true
        } else {
          this.userShow = false
        }
        this.userLength = this.userBase.length
      }
    },
    userCancel() {
      this.showUser();
      this.search = '';
    },
    async handleSave(index, row) {
      if (this.userShowArray[index].isEdit) {
        this.$set(this.userShowArray[index], 'isEdit', false)
        delete row.isEdit
        row.index = index + (this.currentUserPage - 1) * 5 + 1
        await this.$axios.post('/alterUser', row)
        this.$message.success('修改成功')
      }
    },
    handleDelete(index, row) {
      this.$confirm(`确定删除${row.name}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
      }).then(async () => {
        const item = index + (this.currentUserPage - 1) * 5 + 1
        await this.$axios.delete('/deleteUser', { params: { deleteIndex: item } })
        this.$message.success('删除成功')
        this.userShowArray.splice(index, 1);
        this.userBase.splice(item, 1)
        this.userLength = this.userBase.length
        if (this.userShowArray.length == 0 && this.userBase != []) {
          this.userPagnation(this.currentUserPage - 1)
        }
      });
    }
  },
  mounted() {
    this.showUser()
  }
}
</script>

<style scoped>
.pagnation {
  float: left;
  margin-top: 65px;
  margin-left: 120px;
}

.search {
  width: 180px;
  margin-right: 9px
}
</style>